<template>
	<view :style="themeColor">
		<view class="page">
			<view class="flex align-stretch benben-position-layout flex recharge_flex_0"
				:style="{height:(88+StatusBarRpx)+'rpx',paddingTop:StatusBarRpx+'rpx', }">
				<view class='flex align-center justify-between flex-sub recharge_fd0_0'>
					<view class='flex align-center recharge_fd0_0_c0' @tap.stop="handleJumpDiy" data-type="back"
						data-url="1">
						<text class='fu-iconfont2  recharge_fd0_0_c0_c0'>&#xE794;</text>
					</view>
					<view class='flex align-center'>
						<text class='recharge_fd0_0_c1_c0'>充值</text>
					</view>
					<view class='flex align-center recharge_fd0_0_c2'>
					</view>
				</view>

			</view>
			<view :style="{height: (88+StatusBarRpx)+'rpx'}"></view>
			<!---flex布局flex布局开始-->
			<view class="flex flex-direction flex-wrap align-stretch benben-flex-layout recharge_flex_1">
				<text class='recharge_fd1_0'>充值金额</text>
				<view class='flex flex-direction flex-wrap align-stretch recharge_fd1_1'>
					<benben-select-diy ref="showSelectPopup1661330456288" class-name='flex flex-wrap align-center flex'
						:items.sync="rechargeType" v-model="rechargeLablLablLable" :label.sync="recharge_id"
						default-type="payable_money" default-label="aid" :allow-cancel='false' type="radio"
						:disabled='false'>
						<template v-for='(item,key0) in rechargeType'>
							<view v-if="item.isSelected"
								class='flex flex-direction align-center justify-center flex recharge_fd1_1_c0_c0'
								:key="key0" @tap="$refs.showSelectPopup1661330456288.tapHandle(key0)">
								<view class='flex flex-wrap align-center'>
									<text class='recharge_fd1_1_c0_c0_c0_c0'>{{item.payable_money}}</text>
									<text class='recharge_fd1_1_c0_c0_c0_c0'>元</text>
								</view>
								<view class='flex flex-wrap align-center'>
									<text class='recharge_fd1_1_c0_c0_c0_c0'>到账</text>
									<text class='recharge_fd1_1_c0_c0_c0_c0'>{{item.real_arrival_money}}</text>
									<text class='recharge_fd1_1_c0_c0_c0_c0'>元</text>
								</view>
							</view>
							<view v-else
								class='flex flex-direction align-center justify-center flex recharge_fd1_1_c0_c1'
								:key="key0" @tap="$refs.showSelectPopup1661330456288.tapHandle(key0)">
								<view class='flex flex-wrap align-center'>
									<text class='recharge_fd1_1_c0_c1_c0_c0'>{{item.payable_money}}</text>
									<text class='recharge_fd1_1_c0_c1_c0_c0'>元</text>
								</view>
								<view class='flex flex-wrap align-center'>
									<text class='recharge_fd1_1_c0_c1_c0_c0'>到账</text>
									<text class='recharge_fd1_1_c0_c1_c0_c0'>{{item.real_arrival_money}}</text>
									<text class='recharge_fd1_1_c0_c1_c0_c0'>元</text>
								</view>
							</view>
						</template></benben-select-diy>
				</view>
			</view>

			<!---flex布局flex布局结束-->
			<!---flex布局flex布局开始-->
			<view class="flex flex-direction flex-wrap align-stretch benben-flex-layout">
				<text class='recharge_fd2_0'>自定义输入金额</text>
				<view class='flex flex-wrap align-center recharge_fd2_1'>
					<text class='recharge_fd2_1_c0'>￥</text>
					<benben-input class='flex-sub recharge_fd2_1_c1' type="number" :placeholder="`0.00`"
						confirm-type="done" :maxlength="8"
						placeholder-style="color:rgba(191, 191, 191, 1);font-size:48rpx" @input="inpuFunc($event)"
						v-model="rechargeLablLablLable" />
				</view>
			</view>

			<!---flex布局flex布局结束-->
			<!---flex布局flex布局开始-->
			<view class="flex benben-flex-layout flex-wrap align-center recharge_flex_3">
			</view>

			<!---flex布局flex布局结束-->
			<!---flex布局flex布局开始-->
			<view class="flex flex-direction flex-wrap align-stretch benben-flex-layout recharge_flex_4">
				<text class='recharge_fd4_0'>选择支付方式</text>
				<benben-select-diy ref="showSelectPopup1661330466906"
					class-name='flex flex-direction flex-wrap align-stretch flex recharge_fd4_1' :items.sync="payType"
					v-model="pay_id" default-type="value" default-label="name" :allow-cancel='false' type="radio"
					:disabled='false'>
					<template v-for='(item,key0) in payType'>
						<view v-if="item.isSelected" class='flex align-center flex recharge_fd4_1_c0' :key="key0"
							@tap="$refs.showSelectPopup1661330466906.tapHandle(key0)">
							<image class='recharge_fd4_1_c0_c0' mode="aspectFit" :src='item.image'></image>
							<text class='recharge_fd4_1_c0_c1'>{{item.name}}</text>
							<image class='recharge_fd4_1_c0_c2' mode="aspectFit" :src='STATIC_URL+"133.png"'></image>
						</view>
						<view v-else class='flex align-center flex recharge_fd4_1_c0' :key="key0"
							@tap="$refs.showSelectPopup1661330466906.tapHandle(key0)">
							<image class='recharge_fd4_1_c0_c0' mode="aspectFit" :src='item.image'></image>
							<text class='recharge_fd4_1_c0_c1'>{{item.name}}</text>
							<image class='recharge_fd4_1_c0_c2' mode="aspectFit" :src='STATIC_URL+"331.png"'></image>
						</view>
					</template></benben-select-diy>
			</view>

			<!---flex布局flex布局结束-->
			<view class="flex align-center justify-center benben-position-layout flex recharge_flex_5">
				<button class='recharge_fd5_0' @tap.stop="postPayFunc()">立即充值</button>

			</view>
			<view :style="{height: '88rpx'}"></view>


		</view>
	</view>
</template>
<script>
	import {
		validate
	} from '@/common/utils/validate.js'

	export default {
		components: {},


		data() {
			return {
				"rechargeType": [],
				"recharge_id": "",
				"payType": [],
				"pay_id": "",
				"submit": {
					"order_sn": "",
					"payable_money": ""
				},
				"payInfo": "",
				"payable_money": "",
				"rechargeLablLablLable": ""
			};
		},
		computed: {
			themeColor() {
				return this.$store.getters.themeColor
			},

		},
		watch: {},
		onLoad(options) {
			this.getRechargeFunc()
			this.get_pay_typeFunc()
		},
		onUnload() {

		},
		onReady() {

		},
		onShow() {

		},
		onHide() {

		},
		onResize() {

		},
		onPullDownRefresh() {

		},
		onReachBottom(e) {

		},
		onPageScroll(e) {

		},
		methods: {
			//获取充值信息
			async getRechargeFunc() {
				//请求方法
				//数据验证

				let datarechargeType = await this.$api.get(global.apiUrls.post636f522d2dbe9, {

				});

				if (datarechargeType.data.code != 1) {
					this.$message.info(datarechargeType.data.msg);
					return
				}
				let inforechargeType = datarechargeType.data;
				this.rechargeType = inforechargeType.data

			},
			//提交支付
			async postPayFunc() {
				if (!validate(this.rechargeLablLablLable, 'require')) {
					this.$message.info('请输入充值金额');
					return false;
				}
				if (this.rechargeLablLablLable <= 0) {
					this.rechargeLablLablLable = '0';
					this.$message.info("请输入正确金额");
					return false;
				}
				if (!validate(this.pay_id, 'require')) {
					this.$message.info('请选择充值方式');
					return false;
				}
				if (this.$util.antiShakeThrottle()) return
				//请求方法
				//数据验证
				let datasubmit = await this.$api.post(global.apiUrls.post636f632a12277, {
					payable_money: this.rechargeLablLablLable,
					product_id: this.recharge_id,
					pay_type: this.pay_id
				});

				if (datasubmit.data.code != 1) {
					this.$message.info(datasubmit.data.msg);
					return
				}
				let infosubmit = datasubmit.data;
				this.submit = infosubmit.data

				if (this.pay_id == '1') {
					console.log(this.pay_id, '213213213213');
					//请求方法
					//数据验证
					let ccc = ''
					// #ifdef APP-PLUS || H5
					ccc = global.apiUrls.post62e335233b477
					console.log('我是app');
					// #endif
					// #ifdef MP-WEIXIN
					// ccc = global.apiUrls.post62e335233b477 //微信支付
					ccc = global.apiUrls.post66596d37880c6 //江阴支付
					console.log('我是小程序');
					// #endif
					let data66596d37880c6 = await this.$api.post(ccc, {
						order_sn: this.submit.order_sn,
						// #ifdef APP-PLUS
						wxpaytype: 'AppPay',
						// #endif
						// #ifdef MP-WEIXIN
						wxpaytype: 'MiniPay',
						// #endif
						order_config_id: '17'
					});
					if (data66596d37880c6.data.code != 1) {
						this.$message.info(data66596d37880c6.data.msg);
						return
					}
					let info66596d37880c6 = data66596d37880c6.data;
					this.payInfo = info66596d37880c6.data
					console.log('payInfo', this.payInfo);
					await this.requestPaymentWx(this.payInfo)
					this.$urouter.redirectTo(
						`/pages/index/postRecharge/postRecharge?pay_id=${this.pay_id}&money=${this.submit.payable_money}`
					);
				} else {
					//请求方法
					//数据验证

					let data62e342a23919c = await this.$api.post(global.apiUrls.post62e342a23919c, {
						order_config_id: '17',
						order_sn: this.submit.order_sn
					});

					if (data62e342a23919c.data.code != 1) {
						this.$message.info(data62e342a23919c.data.msg);
						return
					}
					let info62e342a23919c = data62e342a23919c.data;
					this.payInfo = info62e342a23919c.data
					console.log('payInfo', this.payInfo);
					await this.requestPaymentAli(this.payInfo)
					this.$urouter.redirectTo(
						`/pages/index/postRecharge/postRecharge?pay_id=${this.pay_id}&money=${this.submit.payable_money}`
					);
				}
			},
			//限制两位小数
			inpuFunc(e) {
				let price = e.match(/^\d*(\.?\d{0,2})/g)[0];
				let that = this;
				if (this.rechargeLablLablLable != price) {
					this.$nextTick(() => {
						this.rechargeLablLablLable = price
					})
					this.$message.info("小数点后保留两位");
					return
				}
			},
			//获取支付方式
			async get_pay_typeFunc() {
				//请求方法
				//数据验证

				let datapayType = await this.$api.get(global.apiUrls.post6539e3dfc1fd0, {
					type: '17'
				});

				if (datapayType.data.code != 1) {
					this.$message.info(datapayType.data.msg);
					return
				}
				let infopayType = datapayType.data;
				this.payType = infopayType.data

				this.pay_id = this.payType[0]?.value
			}
		}
	};
</script>
<style lang="scss" scoped>
	.page {
		width: 100vw;
		overflow-x: hidden;
		min-height: calc(100vh - var(--window-bottom));
		background: rgba(255, 255, 255, 1);
		background-size: 100% auto;
	}

	.recharge_flex_0 {
		border-bottom: 1px solid #eee;
		background: #fff;
		width: 750rpx;
		height: 88rpx;
		overflow: hidden;
		z-index: 10;
		top: 0rpx;
		background-size: 100% auto !important;
	}

	.recharge_fd0_0_c2 {
		width: 180rpx;
		height: 40rpx;
	}

	.recharge_fd0_0_c1_c0 {
		font-size: 36rpx;
		font-weight: 500;
		color: #333;
	}

	.recharge_fd0_0_c0_c0 {
		font-size: 32rpx;
		font-weight: 500;
		color: #333;
	}

	.recharge_fd0_0_c0 {
		width: 180rpx;
		height: 88rpx;
	}

	.recharge_fd0_0 {
		padding: 0rpx 32rpx 0rpx 32rpx;
		height: 88rpx;
	}

	.recharge_flex_1 {
		padding: 32rpx 0rpx 0rpx 0rpx;
	}

	.recharge_fd1_1_c0_c1_c0_c0 {
		font-size: 32rpx;
		font-weight: 400;
		color: rgba(26, 26, 26, 1);
		line-height: 45rpx;
	}

	.recharge_fd1_1_c0_c1 {
		border: 1px solid #CBCBCB;
		margin: 0rpx 7rpx 36rpx 7rpx;
		width: 220rpx;
		height: 120rpx;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
	}

	.recharge_fd1_1_c0_c0_c0_c0 {
		font-size: 32rpx;
		font-weight: 400;
		color: var(--benbenFontColor4);
		line-height: 45rpx;
	}

	.recharge_fd1_1_c0_c0 {
		border: 2px solid var(--benbenbdColor2);
		background: rgba(227, 29, 26, 0.08);
		width: 220rpx;
		height: 120rpx;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		position: relative;
		margin: 0rpx 7rpx 36rpx 7rpx;
		background-size: 100% auto;
	}

	.recharge_fd1_1 {
		padding: 0rpx 0rpx 0rpx 25rpx;
	}

	.recharge_fd1_0 {
		margin: 0rpx 32rpx 24rpx 32rpx;
		font-weight: 400;
		font-size: 28rpx;
		color: #333333;
		line-height: 40rpx;
	}

	.recharge_fd2_1_c1 {
		font-size: 48rpx;
		font-weight: 400;
		color: #333;
	}

	.recharge_fd2_1_c0 {
		font-size: 40rpx;
		font-weight: 400;
		color: #333;
		margin: 0rpx 27rpx 0rpx 0rpx;
	}

	.recharge_fd2_1 {
		border-bottom: 1px solid #eee;
		margin: 0rpx 32rpx 32rpx 32rpx;
		padding: 0rpx 0rpx 30rpx 0rpx;
	}

	.recharge_fd2_0 {
		margin: 0rpx 32rpx 24rpx 32rpx;
		font-weight: 400;
		font-size: 28rpx;
		color: #333333;
		line-height: 40rpx;
	}

	.recharge_flex_3 {
		background: rgba(246, 247, 249, 1);
		height: 20rpx;
		background-size: 100% auto;
	}

	.recharge_flex_4 {
		padding: 0rpx 0rpx 15rpx 0rpx;
	}

	.recharge_fd4_1_c0_c2 {
		width: 36rpx;
		height: 36rpx;
		margin: 0rpx 0rpx 0rpx auto;
	}

	.recharge_fd4_1_c0_c1 {
		font-size: 32rpx;
		font-weight: 400;
		color: #333333;
		line-height: 45rpx;
	}

	.recharge_fd4_1_c0_c0 {
		width: 56rpx;
		height: 56rpx;
		margin: 0rpx 16rpx 0rpx 0rpx;
	}

	.recharge_fd4_1_c0 {
		margin: 0rpx 0rpx 56rpx 0rpx;
	}

	::v-deep .recharge_fd4_1 {
		margin: 0rpx 32rpx 0rpx 32rpx;
	}

	.recharge_fd4_0 {
		border-bottom: 1px solid #eee;
		margin: 0rpx 32rpx 32rpx 32rpx;
		font-size: 28rpx;
		font-weight: 500;
		color: #666666;
		line-height: 40rpx;
		padding: 32rpx 0rpx 32rpx 0rpx;
	}

	.recharge_flex_5 {
		width: 750rpx;
		height: 88rpx;
		overflow: hidden;
		z-index: 10;
		bottom: calc(32rpx + var(--window-bottom));
	}

	.recharge_fd5_0 {
		background: var(--benbenbgColor2);
		border-radius: 44rpx 44rpx 44rpx 44rpx;
		font-size: 32rpx;
		color: #fff;
		width: 686rpx;
		height: 88rpx;
		line-height: 88rpx;
		font-weight: 500;
	}
</style>